<!-- 申请页面 -->
<template>
  <div style="width: 70%; margin: 20px auto">
    <el-card style="width: 100%">
      <h1 style="text-align: center">{{ route.query.project }}</h1>
      <el-steps
        style="max-width: 100%"
        :active="active"
        finish-status="success"
      >
        <el-step title="个人信息填写" />
        <el-step title="上传相关文件" />
        <el-step title="提交" />
      </el-steps>
      <div>
        <el-form
          v-show="active == 0"
          ref="formRef"
          :model="form"
          label-width="100px"
          style="width: 100%; margin-top: 20px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名">
                <el-input v-model="form.realName" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号">
                <el-input v-model="form.identityCard" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系电话">
                <el-input v-model="form.phone" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服役年限">
                <el-input v-model="form.serviceYears" type="number" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="退役日期">
                <el-date-picker
                  v-model="form.retireDate"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="选择日期"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="退役军衔">
                <el-input v-model="form.retireRank" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="现居住地">
                <el-input v-model="form.habitation" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="width: 100%; margin-top: 20px" v-show="active == 1">
          <h3>下载申请表模板</h3>
          <el-link :underline="false" :href="route.query.fileUrl"
            >模板下载</el-link
          >
          <h3>上传申请表</h3>
          <el-upload
            class="upload-demo"
            style="width: 100%"
            v-model:file-list="fileList"
            :show-file-list="true"
            :limit="1"
            drag
            multiple
            :auto-upload="true"
            :http-request="upload"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将文件拽到此处或 <em>点击上传</em>
            </div>
          </el-upload>
        </div>
      </div>
      <div v-show="active == 2" style="margin-top: 20px">
        确认无误后请点击提交
      </div>
      <div style="margin-top: 12px; display: flex; justify-content: flex-end">
        <el-button v-if="active > 0" @click="last">上一步</el-button>
        <el-button v-if="active < 2" @click="next">下一步</el-button>
        <el-button v-if="active == 2" @click="submit">提交</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { useUserStore } from "@/stores/userInfo";
import { UploadFilled } from "@element-plus/icons-vue";
import { uploadFile, reqApplyTask } from "@/api/api";
import { ElMessage } from "element-plus";
const fileList = ref([]);
const userStore = useUserStore();
const route = useRoute();
const active = ref(0);

const form = ref({
  mattersId: route.query.matterId,
  realName: userStore.userInfo.realName,
  identityCard: userStore.userInfo.identityCard,
  phone: userStore.userInfo.phone,
  serviceYears: "",
  retireDate: "",
  retireRank: "",
  habitation: "",
  applyForm: "",
});
const next = () => {
  active.value++;
};
const last = () => {
  active.value--;
};

const upload = async () => {
  console.log(fileList.value[0].raw);
  console.log(fileList.value);

  const res = await uploadFile({ file: fileList.value[0].raw });
  if (res.code == 200) {
    // imageUrl.value = res.data;
    form.value.applyForm = res.data;
  } else {
    ElMessage.error(res.msg);
  }
};

const submit = async () => {
  console.log(form.value);

  const res = await reqApplyTask(form.value);
  if (res.code == 200) {
    ElMessage.success(res.msg);
    setTimeout(() => {
      window.history.back();
    }, 1000);
  } else {
    ElMessage.error(res.msg);
  }
};
</script>

<style lang="scss" scoped></style>
